<template>
  <div class='config-checkmodule-container'>
    <el-row>
      <el-col :span="3">
        <el-button @click="chooseItem"
                   type="primary">关联检查项</el-button>
      </el-col>
    </el-row>
    <el-table :data="bindCheckItemList.list"
              class="check-item-list"
              :header-cell-style="{background:'#f5f5f5'}">
      <el-table-column type="index"
                       label="序号">
      </el-table-column>
      <el-table-column prop="check_item_name"
                       label="检查项名称">
      </el-table-column>
      <el-table-column prop="config_num"
                       label="配置数量">
      </el-table-column>
      <el-table-column prop="sort"
                       width="120"
                       label="排序">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at"
                       label="更新时间">
      </el-table-column>
      <el-table-column prop="remark"
                       label="备注">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button @click="deleteItem(scope.row)"
                     type="text">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <div class="btn-groups">
      <el-button @click="updateCheckModuleConfig"
                 type="primary">保存</el-button>
      <el-button @click="back">取消</el-button>
    </div>
    <ChooseCheckItemDialog :dialogVisible.sync="chooseCheckItemDialogVisible"
                           :moduleId="requestParam.check_module_id"
                           @callback="chooseItemCb"></ChooseCheckItemDialog>
  </div>
</template>
<script>
import { CommonCheckApi } from '@/services/SystemSetting'
import ChooseCheckItemDialog from './components/ChooseCheckItemDialog'
export default {
  data () {
    return {
      // 获取已绑定检查项列表参数
      requestParam: {
        check_module_id: '',
        is_page: 0,
        page: 1,
        page_size: 10
      },
      // 已绑定检查项列表
      bindCheckItemList: {
        list: []
      },
      // 选择检查项弹框是否可见
      chooseCheckItemDialogVisible: false
    }
  },
  components: {
    ChooseCheckItemDialog
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 获取已绑定检查项列表
    getBindCheckItemList () {
      CommonCheckApi.getCheckModuleBindItemList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.bindCheckItemList = res.data
          // this.bindCheckItemList.list.map((item) => {
          //   this.$set(item, 'sort', item.sort)
          // })
        }
      })
    },
    // 删除已绑定检查项
    deleteItem (row) {
      console.log(row, 'delete item')
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 获取被删除行的index
          let index = -1
          this.bindCheckItemList.list.map((item, ind) => {
            if (item.check_item_id === row.check_item_id) index = ind
          })
          this.bindCheckItemList.list.splice(index, 1)
          this.updateCheckModuleConfig()
        })
        .catch(() => {

        })
    },
    // 调用保存接口
    updateCheckModuleConfig () {
      let data = {
        check_module_id: this.requestParam.check_module_id,
        is_add: '0',
        module_config: []
      }
      this.bindCheckItemList.list.map((item) => {
        data.module_config.push({
          check_item_id: item.check_item_id,
          sort: item.sort
        })
      })
      CommonCheckApi.editCheckModuleItem({
        data: data
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改成功')
          this.$router.push({
            path: '/checkModuleManage'
          })
          // this.getBindCheckItemList()
        }
      })
    },
    // 选择检查项
    chooseItem () {
      this.chooseCheckItemDialogVisible = true
    },
    // 选择检查项回调
    chooseItemCb () {
      this.getBindCheckItemList()
    }
  },
  created () {
    this.requestParam.check_module_id = this.$route.query.id
    this.getBindCheckItemList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.config-checkmodule-container {
  padding: 20px;
  .el-table {
    height: 600px;
    margin-top: 20px;
  }
  .btn-groups {
    text-align: center;
    margin-top: 20px;
  }
}
</style>